<template>
	<view class="technician">
		<view class="" >
				<view class="dataList">
					<view class="technicianList flex">
						<image class="img" style="border-radius: 50%;" :src="baseImgUrl + 'img_common_tech.png'" alt="" />
						<view class="flex1">
							<view class="flexjsbac technicianName">{{formData1.name}}</view>
							<view class="flexjsbac list_con">
								<view class="flexJcac">
									<u-icon name="order" color="#666666" size="22"></u-icon>
									{{formData1.time}}
								</view>
							</view>
						</view>
					</view>
					<view class="technicianList flex" v-for="(item1, index) in technicianList" :key="index">
						<image class="img" :src="baseImgUrl + 'img_common_tech.png'" alt="" />
						<view class="flex1">
							<view class="flex technicianName">
								<text>{{item1.name}}</text>
								<text class="rate">评分:5分</text>
							</view>
							<view class="flex list_con">
								<u-rate :count="value" v-model="value" active-color="#C27E15" inactive-color="#C27E15">
								</u-rate>
								技师
							</view>
							<view class="flex">
								<u-icon name="order" color="#666666" size="22"></u-icon>
								{{item1.fwxm}}
							</view>
							
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default{
		name:'ReservationHead',
		props:{
			status:{
				type:Object,
				default:{
					0:{
						title:'待服务',
						color:'#C27E15'
					},
					1:{
						title:'部分待服务',
						color:'#C27E15'
					},
					2:{
						title:'服务中',
						color:'#FF0000'
					},
					3:{
						title:'待评价',
						color:'#FF0000'
					}
				}
			},
			slotName:{
				type:String,
				default:'btn'
			},
			isChecked:{
				type:Boolean,
				default:false
			},
			moneyShow:{
				type:Boolean,
				default:false
			},
			giveMoneyShow:{
				type:Boolean,
				default:false
			},
			formData1:{
				type:Object,
				default:{
					name:'门店名称',
					location:'',
					time:'9：00~23：00',
					address:'锦江区空港国际城77号锦江区空港国际城77号'
				}
			}
			
		},
		data(){
			return{
				baseImgUrl: pageConfig.baseImgUrl,
				formData:[],
				addd:true,
				value:3,
				technicianList:[
					{
						name:'08号何燕',
						fwxm:'颈肩按摩90分钟',
						yysj:'2023-04-07 13：20-14：20',
						status:0,
						money:249.00,
						id:1
					},
					{
						name:'08号何燕',
						fwxm:'颈肩按摩90分钟',
						yysj:'2023-04-07 13：20-14：20',
						status:0,
						money:249.00,
						id:2
					},
				]
			}
		},
		methods:{
			checkboxChange(e,item){
				if(e){
					this.formData.push(item)
				}else{
					let el = this.formData.find(itm => itm.id === item.id);
					if (el) this.formData.splice(this.formData.indexOf(el), 1);
				}
			},
			clickItem(item){
				uni.navigateTo({
					url:`/subPages/order/orderDetail`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.technician{
		margin: 30rpx;
		.dataList{
			margin-bottom: 30rpx;
			background: #fff;
			border-radius:17rpx;
			.bottom_con{
				border-top: 1px solid #E6E6E6;
				height: 122rpx;
				padding: 24rpx;
			}
			.dataList_title{
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;
			}
			.giveMoney{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				border-bottom:none;
				height: 57rpx;
				padding: 24rpx;
			}
			.technicianList{
				padding: 24rpx;
				border-bottom: 1px solid #E6E6E6;
				.technicianName{
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
					.rate{
						font-size: 20rpx;
						font-weight: 400;
						color: #FF3205;
						background-color: rgba(255, 50, 5, .1);
						margin-left: 10rpx;
						padding: 0 10rpx;
					}
				}
				.list_con{
					margin: 15rpx 0;
					color: #C27E15;
				}
				img{
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
	
</style>